

////////////////////////////////////Socket/////////////////////////////////////////////////

//该平台使用echarts架构将从后台收集的数据显示为动态图表。
//图表的基本数据结构，echarts架构的数据结构
//https://echarts.apache.org/zh/option.html#title
//详细信息可以参考echarts的document
var option = {
    //标题的内容及格式
    title:{
        text:"李氏族谱",
        textStyle:{
            fontSize:25
        },
        
    },
    tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove',
        formatter:function(params){
            return params.value;
        },
        position:{right:10,top:10}
    },
    series: [{
        type: "tree",
        layout: 'orthogonal',
        orient: "LR",
        left:'2%',
        right:'2%',
        top:"1%",
        bottom:"1%",
        symbolSize: 10,
        roam: true,
        edgeShape: 'polyline',
        initialTreeDepth:8,
        expandAndCollapse:false,
        label: {
            position: 'right',
            verticalAlign: 'middle',
            align: 'left',
            fontSize: 15
        },
        leaves: {
            label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left'
            }
        },
        //emphasis: { focus: 'ancestor' },
        data: []
    }
    ]
};

var chart1;
function famTree(data,root){
    let d = data[root];
    let name = d.name;
    if(d.couple){
        if(d.gender=='m'){
            name += '\n'+d.couple;
        }else{
            name += '\n嫁'+d.couple;
        }
    }
    
    let children = []
    if(d.children){
        eval(d.children).forEach((e)=>{
            children.push(famTree(data,e));
        });
    }
    disp = `
    <div style="width:220px;">
        <div class="row text-center">`
        disp += `<div style="font-weight:bold">`+d.level+`字辈</div><hr>`
    if(d.couple){
        disp += `<div class="col col-6">`
        if(d.ava){disp += `<img class="ava" src="`+d.ava+`"  onerror="this.style.display='none'">`}
        disp += `<div style="font-weight:bold">`+'李'+d.name+`</div></div>`
        disp += `<div class="col col-6">`
        if(d.avac){disp += `<img class="ava" src="`+d.avac+`"  onerror="this.style.display='none'">`}
        disp += `<div style="font-weight:bold">`+d.couple+`</div></div>`
        
    }else{
        disp += `<div class="col col-12">`
        if(d.ava){disp += `<img class="avac" src="`+d.ava+`"  onerror="this.style.display='none'">`}
        disp += `<div style="font-weight:bold">`+'李'+d.name+`</div></div>`
        
    }
    disp += `</div><hr>`
    if(d.discripe){
        disp +=`<div style="white-space:normal;">`+d.discripe+`</div>`
    }
    
    disp += `</div>
    `
    return {name:name,children:children,value:disp}
}

//////////////////////////////////////////////////////////////////////////////////
jQuery(document).ready(() => {
    //装在vue和echarts框架
    jQuery("#mainchart").height(window.innerHeight*3);
    chart1 = echarts.init(document.getElementById('mainchart'));
    jQuery.get("data.json",(data)=>{
        option.series[0].data=[famTree(data,15)]
        chart1.setOption(option);
    });
});
